<template>
  <div>
    <h1>vuex</h1>
    <h2>{{ $store.state.count }}</h2>
    <h2>{{ $store.getters.evenOrOdd }}</h2>
    <h2>{{ count }}</h2>
    <h2>{{ evenOrOdd }}</h2>
    <input type="text" v-model.number="num" /><br />
    <input type="text" v-model="info" /><br />
    <!-- 在组件当中触发mutations当中的数据 -->
    <button @click="add(num)">btn mutations</button>
    <button @click="addObj(num, info)">btn mutations当中传入对象</button><br />
    <!-- 在组件当中触发actions当的方法 -->
    <button @click="decrementAct(num)">btn actions</button>
    <button @click="decrementObjAct">btn actions传参 对象</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      num: 0,
      info: "洋洋第一帅",
    };
  },
  mounted() {
    console.log(this.$store);
  },
  computed: {
    /* count() {
      return this.$store.state.count;
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    }, */
    ...mapState(["count"]),
    ...mapGetters(["evenOrOdd"]),
  },
  methods: {
    add(num) {
      console.log(num);
      this.$store.commit("add", num);
    },
    addObj(num, info) {
      this.$store.commit({
        type: "addObj",
        num,
        info,
      });
    },
    decrementAct(num) {
      this.$store.dispatch("decrementAct", num);
    },
    decrementObjAct() {
      this.$store.dispatch({
        type: "decrementObjAct",
        num: 10,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>